Cards Guidelines 卡片指導規則

Usage 使用方式

兩種卡片佈局：網格檢視和列表檢視

卡片文字和圖片顯示出清晰的層級結構
使用卡片來展示與單一主題相關的資訊

資訊密度：

✓ 卡片可以一起顯示

× 不要在間距、標題或分隔線可以建立更簡單的視覺層次時，強行將內容放入卡片中。
卡片有三種型別：1 浮雕式 2填充式 3輪廓式
浮雕式卡片有投影效果，與背景的分離程度大於填充式卡片，但小於輪廓式卡片。
填充式卡片提供細微的背景分離，其強調程度小於浮雕式或輪廓式卡片。
輪廓式卡片具有視覺邊界，這可以提供比其他型別更大的強調。

Anatomy 結構

1 Container 2Headline 3 Subhead 4 Supporting text 5 image 6 Button

Container  容器

卡片容器要有清晰的邊框，讓內容更容易分辨。無論是在深色還是淺色背景下，卡片都要保持適當的顏色對比，讓使用者看得清楚。

Content blocks  內容塊

卡片能顯示不同型別的內容，比如文字、圖片或按鈕。你可以用它來展示單個資訊，也可以把多個卡片組合在一起形成更豐富的頁面。

Dividers  分隔線

分割線用來把卡片內的不同內容分開。當卡片裡有多段內容時，加上分割線可以讓內容更容易閱讀。

可擴充套件的內容應使用全寬分隔線
使用內嵌分隔線，這些分隔線不會覆蓋卡片的整個寬度，用以區分相關內容。

Media  媒體

卡片裡可以放入圖片、影片或音訊內容。把這些內容放在容易看到的地方，可以讓重要資訊更加突出。

Text 文字

標題：標題文字通常用來表達卡片的主題，如相簿或文章的名稱。

副標題：副標題是較小的文字元素，如文章的作者名或標記的位置。

輔助文字：輔助文字包括主體內容，如文章摘要或餐廳描述。

Layering text, icons, and images 疊加文字、圖示和圖片

不建議直接在圖片上放文字和圖示。如果必須這樣做，請注意兩點：

  1. 確保文字和圖片背景有足夠的顏色對比，這樣每個人都能輕鬆閱讀。
  1. 可以在圖片上新增一層半透明的深色或淺色遮罩，讓文字和圖示更清晰。
⚠注意（Caution） 確保圖片上的文字符合無障礙對比度標準。
⚠ 注意（Caution）在圖片上放置文字或圖示時，可考慮使用邊界形狀來確保適當的對比度。

Actions  操作

Primary action area  主要操作區域

主要操作區域：卡片可以作為一個大型觸控目標，觸發展開詳情介面。

Buttons  按鈕

卡片可以包含評分按鈕，如星級評分系統，用於使用者評價內容。
卡片可以包含評分按鈕，如星級評分系統，用於使用者評價內容。
卡片可以包含滑塊控制元件，例如音樂播放器的進度條。
溢位選單用於包含相關操作，通常位於卡片的右上角或右下角，方便使用者訪問更多選項。

Cards in a collection 卡片集合

卡片可以放在一起形成統一的內容展示區。這種展示方式常用於：向使用者推薦內容、展示商品、顯示圖片集

過濾與排序（Filtering and sorting）

Grid 網格佈局

卡片可以像方格一樣排列在頁面上，這樣既能節省空間，看起來也更整齊美觀。這種排列方式特別適合展示大量內容，比如照片牆或者網上商城的商品展示。

Vertical list 縱向列表

手機等移動裝置上，最好把卡片豎著排列，這樣使用者上下滑動時更方便檢視。

Vertical list  垂直列表

Carousel  輪播

卡片可以水平排列或輪播的形式一起展示。

Responsive layout  響應式佈局

隨著卡片縮放以適應不同的視窗大小類別，它們的位置和對齊方式也可能發生變化。

Ergonomics  人體工程學

卡片的佈局會根據螢幕大小自動調整，讓使用者更容易使用。比如，在小螢幕上橫著排列的卡片，在大螢幕上會變成豎著排列的更大卡片。這樣可以在大螢幕上展示更清晰的圖片和文字。

Visual presentation  視覺呈現

調整元件佈局時要注意合理使用間距。把列表、卡片和圖片等內容放置得既不會太擠，又能充分利用不同裝置螢幕的空間。

Column-based layouts  基於列的佈局

手機螢幕上的卡片和列表會自動調整為全屏寬度。在大螢幕上，內容會分列顯示，避免佔據整個螢幕，而是採用單行排列或可滑動的形式。

Small screens  小螢幕

在小螢幕上，建議將卡片轉換為列表形式，以緊湊方式顯示內容，同時保留必要的控制元件和操作功能。

Behavior  行為

Expanding  展開

卡片可以展開到全屏顯示更多內容。當你點選卡片時，它會平滑地放大，並顯示完整的詳細資訊。這種展開效果最好只用在重要的介面轉場時刻，不要過度使用。

✓ 展開卡片，顯示資訊
× 不要再卡片內滾動

Navigation  導航

卡片支援前進和後退的切換效果，讓使用者可以在不同頁面之間輕鬆瀏覽。這種簡單的切換方式比複雜的容器動畫更適合日常使用。

Gestures  手勢

Swipe 滑動

一次可在單張卡片上的任意位置執行滑動手勢。可用於關閉卡片，更改卡片狀態（如標記或存檔）

✓ 單張卡片僅分配一項滑動操作
× 卡片不要加入可以左右滑動的內容（比如輪播圖或多頁內容）。另外，當使用者滑動卡片時，卡片的各個部分要保持完整，不能分散開。

Pick up and move  拿起並移動

允許使用者在集合中移動和重新排列卡片。

✓ 移動卡片時，提高卡片等級
× 不要讓卡片擠開其他元素。當卡片被提起時，它應出現在所有元素的前面（應用欄和導航除外）

Scrolling  滾動

卡片內容超出時會被隱藏，可透過調整卡片高度或在螢幕範圍內滾動檢視完整內容。

✓ 在移動裝置上，卡片可以展開以顯示更多內容，並螢幕內
× 在移動裝置上，卡片內部無法滾動，因為這可能會顯示兩個捲軸

Scrolling on desktop  桌面端滾動

在桌面裝置上，卡片內容可以在卡片內展開並滾動。

Interaction & style  互動與樣式

卡片有兩種用法：

  1. 可以作為單純的容器，裡面放置按鈕和連結等可點選的內容
  1. 整個卡片本身可以點選，這時候就不需要在裡面放按鈕或連結

注意：如果整個卡片是可點選的，就不要在上面再放其他可點選的東西，這樣會讓使用者感到困惑。

Touch  觸控

點選卡片時的效果很簡單：可以操作的卡片會顯示水波紋動畫，讓你知道已經點選了；不能操作的卡片則不會有任何反應。

Dragging and dismissing  拖動並取消

為了讓所有人都能方便使用，除了拖動和滑動操作外，還要提供更簡單的方式。比如，你可以點選或長按卡片，開啟一個選單來完成同樣的操作，包括移動卡片位置或刪除卡片。

不建議在可拖動狀態下將選單放置在卡片頂部。如果確實有必要這樣做，請確保互動能夠完成

× 避免選單遮蓋卡片

Cursor  游標

把滑鼠放在可點選的卡片上時，卡片會有特殊顯示效果，提示使用者可以點選。如果卡片不能點選，則不會有這種效果。點選可操作的卡片時，會出現水波紋動畫作為反饋。